<template>
  <div class="elec-safety-bottom">
    <div class="alarm-statistics box">
      <moduleLeft title="日报警数量统计" :clipsmall="false">
        <div class="content" id="statistics-chart"></div>
      </moduleLeft>
    </div>
  </div>
</template>

<script>
import { mixins } from "./js/mixins";
import { powerStatisticsData } from "@/api/index";
export default {
  name: "homeBottom",
  mixins: [mixins],
  data() {
    return {};
  },
  mounted() {
    // this.initAlarmStatistics();
    this.getElecStatisticsData();
  },
  methods: {
    // initAlarmStatistics() {
    //   let xdata = [
    //     "9.27",
    //     "9.26",
    //     "9.25",
    //     "9.24",
    //     "9.23",
    //     "9.22",
    //     "9.21",
    //     "9.20",
    //     "9.19",
    //     "9.18",
    //     "9.17",
    //     "9.16",
    //   ];
    //   let ydata = [1, 1, 2, 2, 1, 2, 1, 2, 1, 1, 1, 0];
    //   this.setAlarmStatistics({ xdata, ydata }, "statistics-chart");
    // },
    // 获取电力统计和图表数据
    getElecStatisticsData() {
      let xdata = [];
      let ydata = [];
      powerStatisticsData({ type: 2 }).then((res) => {
        res.list = res.list ?? [];
        if (res.list) {
          res.list.forEach((item) => {
            xdata.push(item.monthOrDay);
            ydata.push(item.currentTotal - 0);
          });
        }
        this.setAlarmStatistics({ xdata, ydata }, "statistics-chart");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.elec-safety-bottom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .alarm-statistics {
    width: 100%;
    height: 100%;
    .content {
      height: calc(100% - 0px);
    }
  }
}
</style>
